<template>
  <el-table
    :data="tableData"
    :border="configurationTable.border"
    :highlight-current-row="configurationTable.singleChoice"
    style="width: 100%"
  >
    <el-table-column
      v-if="configurationTable.isSelection"
      type="selection"
      width="55"
      align="center"
    />
    <el-table-column
      v-for="(data, index) of tableType"
      :key="index"
      :label="data.label"
      :prop="data.prop"
      :align="data.align"
      :width="data.width"
    >
      <template v-if="data.isSlot" #default="scope">
        <slot :name="data.prop" :item="scope.row" :index="scope.$index"></slot>
      </template>
    </el-table-column>
  </el-table>
</template>
<script lang="ts" setup>
import { TableConfigurationType, tableDataType } from '@/interfaces/TableType'
export interface TableType {
  tableData?: () => [] // 默认初始页
  tableType?: () => []
  configurationTable?: TableConfigurationType
}
// 默认值
withDefaults(defineProps<TableType>(), {
  currentPage2: 1,
  pageSize: 100,
  total: 500,
  configurationTable: () => {
    return {
      border: true,
      isSelection: false,
      singleChoice: false,
    }
  },
})

const tableData: tableDataType[] = [
  {
    id: 1,
    date: '2016-05-03',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    id: 2,
    date: '2016-05-02',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    id: 3,
    date: '2016-05-04',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
]
const tableType = [
  {
    prop: 'name',
    label: '姓名',
    isSlot: true,
    align: 'center',
    width: '100',
  },
  {
    prop: 'address',
    label: '年龄',
    align: 'center',
  },
  {
    prop: 'date',
    label: '性别',
    align: 'center',
  },
]
</script>
